<template>
  <div class="tool-encode-detail">
    <w-nav-bar
      :title="$route.query.title"/>
    <div
      v-if="section === '1' && index === '4'"
      class="w-flex-center">
      <w-image-up
        ref="UP_IMAGE"
        :oss="false"/>
    </div>

    <group v-else>
      <x-textarea
        v-model="inputData"
        placeholder="请输入"/>
      <x-input
        v-if="section === '3' || section === '4'"
        placeholder="请输入KEY"
        v-model="inputKey"/>
    </group>

    <div class="w-max-btn">
      <x-button
        @click.native="btnClick"
        type="primary">确定</x-button>
    </div>
    <div
      class="result-bg"
      v-if="resultData">
      <p class="result">
        {{ resultData }}
        <copy-icon
          class="copy"
          @click="saveBtnClick"/>
      </p>
    </div>
    <div
      class="image-bg"
      v-if="imageData">
      <img :src="imageData">
    </div>
  </div>
</template>

<script>
  import API from '@/api/apis'
  import { post } from '@/api/ajax'
  import WImageUp from '@/components/global/imageUp/server'
  import { XInput, Group, XTextarea, XButton } from 'vux'
  import CopyIcon from '@/icons/copy.svg'
  export default {
    name: 'ToolEncodeDetail',
    components: {
      WImageUp,
      XInput,
      Group,
      XTextarea,
      XButton,
      CopyIcon
    },
    data () {
      return {
        /**
         * 分组号
         */
        section: 0,
        /**
         * 组内号
         */
        index: 0,
        /**
         * 选择的图片
         */
        selImage: null,
        /**
         * 输入的数据
         */
        inputData: '',
        /**
         * 输入的KEY
         */
        inputKey: '',
        /**
         * 结果数据
         */
        resultData: '',
        /**
         * 图片数据
         */
        imageData: ''
      }
    },
    methods: {
      /**
       * 按钮点击
       */
      btnClick () {
        this.resultData = ''
        this.imageData = ''
        switch (this.section) {
          case '0':
            switch (this.index) {
              case '0':
                this.resultData = encodeURIComponent(this.inputData)
                break
              case '1':
                this.resultData = decodeURIComponent(this.inputData)
                break
            }
            break
          case '1':
            switch (this.index) {
              case '0':
                this.textOkBtnClick('encode')
                break
              case '1':
                this.textOkBtnClick('decode')
                break
              case '2':
                this.textOkBtnClick('hexEncode')
                break
              case '3':
                this.textOkBtnClick('hexDecode')
                break
              case '4':
                this.upImage()
                break
              case '5':
                this.base64ToImage()
                break
            }
            break
          case '2':
            switch (this.index) {
              case '0':
                this.md5('md5')
                break
              case '1':
                this.md5('sha1')
                break
              case '2':
                this.md5('sha256')
                break
              case '3':
                this.md5('sha512')
                break
            }
            break
          case '3':
            switch (this.index) {
              case '0':
                this.md5('md5')
                break
              case '1':
                this.md5('sha1')
                break
              case '2':
                this.md5('sha256')
                break
              case '3':
                this.md5('sha512')
                break
            }
            break
          case '4':
            switch (this.index) {
              case '0':
                this.aes('encode')
                break
              case '1':
                this.aes('decode')
                break
            }
            break
        }
      },
      /**
       * 上传图片
       */
      upImage() {
        this.$refs['UP_IMAGE'].upImage(false).then((data) => {
          this.imageToBase64(data)
        }).catch((err) => {
          if (err.code === 'imageUpErr') {
            this.$w_popview.msgError(err.msg)
          }
        })
      },
      /**
       * 文字确定按钮点击
       * @param type
       */
      textOkBtnClick (type) {
        post(API.coding.base64, {
          code: this.inputData,
          type: type
        }).then((data) => {
          this.resultData = data
        }).catch(() => {})
      },
      /**
       * base64转图片
       */
      base64ToImage () {
        post(API.coding.base64ToImage, {
          imageStr: this.inputData
        }).then((data) => {
          this.imageData = data
        }).catch(() => {})
      },
      /**
       * 图片识别
       * @param upImageSrc
       */
      imageToBase64 (upImageSrc) {
        post(API.coding.imageToBase64, {
          imageUrl: upImageSrc
        }).then((data) => {
          this.resultData = data
        }).catch((err) => {
          this.$w_popview.msgError(err)
        })
      },
      /**
       * md5
       * @param type
       */
      md5 (type) {
        post(API.coding.md5, {
          key: this.inputKey,
          type: type,
          input: this.inputData
        }).then((data) => {
          this.resultData = data
        }).catch(() => {})
      },
      /**
       * aes
       * @param type
       */
      aes (type) {
        post(API.coding.aes, {
          key: this.inputKey,
          type: type,
          input: this.inputData
        }).then((data) => {
          this.resultData = data
        }).catch(() => {})
      },
      /**
       * 保存按钮点击
       */
      saveBtnClick() {
        this.$copyText(this.resultData).then(() => {
          this.$w_popview.msgSuccess('已复制粘贴板')
        }, function () {
          this.$w_popview.msgError('复制粘贴板失败')
        })
      }
    },
    mounted () {
      this.section = this.$route.query.section
      this.index = this.$route.query.index
    }
  }
</script>

<style lang="scss" scoped>
  .tool-encode-detail {
    .result-bg {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      .result {
        margin: 0;
        background-color: #eeeeee;
        padding: 5px;
        font-size: 16px;
        box-sizing: border-box;
        word-break:break-all;
        width:100%;
        color: #666;
        overflow:auto;
        position: relative;
        min-height: 80px;
        .copy {
          width: 30px;
          height: 30px;
          fill: #666;
          position: absolute;
          right: 5px;
          top: 5px;
        }
      }
    }
    .image-bg {
      text-align: center;
      img {
        max-width: 90%;
      }
    }
  }
</style>
